<!--  -->
<template>
  <div class="about">
    <router-link to="/">
      <img src="../assets/images/homeicon.png" class="homeicon">
    </router-link>
    <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      active-text-color="#ffd04b" background-color="#00ffffff" text-color="#fff">
      <el-menu-item index="1">活动说明</el-menu-item>
      <el-menu-item index="2">排行榜</el-menu-item>
      <el-menu-item index="3">队伍统计</el-menu-item>
    </el-menu> -->
    <div class="tabs">
      <div @click="handleSelect(1)" :class="['tabitem',activeIndex==1?'activetab':'']">活动说明</div>
      <div @click="handleSelect(2)" :class="['tabitem',activeIndex==2?'activetab':'']">排行榜</div>
      <div @click="handleSelect(3)" :class="['tabitem',activeIndex==3?'activetab':'']">队伍统计</div>

    </div>
    <div class="infor" v-if="activeIndex==1">
      <img src="../assets/images/bluebg.png" width="100%" class="bluebg">
      <div class="test_rule">
        本次线上理论考试时间为2021年8月30日-9月3日。参赛人员进入页面后，点击“进入”按钮进行实名注册（需填写姓名、手机号，选择参赛队伍），一个微信可实名注册一次
        ，注册成功后开始答题。题型分为判断题、单选题和多选题，共10题，随机组卷。考试满分 100
        分，答题时间为10分钟。按答题得分排序，得分相同者，答题用时少者获胜，分数、答题时长均相同者先完成者获胜。第1名-第3名将获得价值299元的SKG颈椎按摩仪；第4名-第6名将获得价值199元的小米小爱音箱；第7名-第10名将获得价值99元的米家便携榨汁杯。
      </div>
      <div class="info_title">
        <img src="../assets/images/des.png" width="300px">
      </div>
      <img src="../assets/images/cloud_per.png" class="cloud">
      <img src="../assets/images/square.png" class="square">
    </div>
    <div class="tabstyle rank" v-if="activeIndex==2">
      <img src="../assets/images/cloud.png" class="cloud">
      <div class="statistics_title">
        <img src="../assets/images/ranktitle.png">
        <img src="../assets/images/rankaward.png">
      </div>
      <div class="rank_data">
        <img src="../assets/images/rank_text.png" width="80%">
        <div class="data_container" v-if="rank_array!=undefined&&rank_array.length!=0">
          <div v-for="(item,index) in rank_array" :key="index"
            :class="['data_item',index==0?'rank_first':index==1?'rank_second':index==2?'rank_third':'rank_normal']">
            <div class="person_infor">
              <div class="avatar">
                <img :src="item.headPhoto" class="avatar_img" :onerror="defaultImg">
                <div class="rank_detail"
                  :style="{'background':index==0?'#eb62b7':index==1?'#e06fed':index==2?'#c990f4':'#cccccc'}">
                  NO.{{index+1}}</div>
              </div>
              <div class="rank_name"> {{item.nickName}}</div>
            </div>
            <div style="font-weight:bold">{{item.time}}</div>

            <div><span style="font-weight:bold">{{item.score}}</span>分</div>
          </div>
        </div>
        <div v-else class="nodata">
          暂时还没有排名哦~
        </div>
      </div>
    </div>
    <div class="tabstyle statistics" v-if="activeIndex==3">
      <img src="../assets/images/cloud.png" class="cloud">
      <div class="statistics_title">
        <img src="../assets/images/statisticstitle.png">
        <img src="../assets/images/statistics_person.png">
      </div>
      <div class="statistics_data">
        <img src="../assets/images/statistics_title.png" width="80%">
        <div class="data_container" v-if="statistics_array.length!=0">
          <div v-for="(item,index) in statistics_array" :key="index"
            :class="['data_item',index%2==0?'rank_second':'rank_third']">
            <div>{{item.DEPT}}</div>
            <div>{{item.DEPTCOUNT}}人</div>
          </div>
        </div>
        <div v-else class="nodata">
          暂时还没有队伍信息哦~
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {
    post
  } from '../assets/utils/axiosRequest'
  export default {
    data() {
      return {
        defaultImg: 'this.src="' + require('../assets/images/avatar.png') + '"',
        activeIndex: '1',
        rank_array: [],
        statistics_array: []
      };
    },
    created() {
      if (this.$route.query.tabindex) {
        var index = this.$route.query.tabindex
        this.activeIndex = index

      }
      this.getDeptStat()
      this.getRank()
    },
    methods: {
      getDeptStat() {
        post("/gt-contest/contest/getDeptStat").then(res => {
          if (res.code = "000000") {
            this.statistics_array = res.result
          } else {
            this.$message({
              message: '网络异常，请联系管理员',
              type: 'warning'
            });
          }
        })
      },
      getRank() {
        let data = new FormData();
        var that = this
        var userIdentify = localStorage.getItem("WZTLUNIONID")
        data.append('eventId', '3');
        data.append('userIdentify', userIdentify);
        data.append('rangeNum', 100)
        post("/gt-contest/contest/getScoreRange", data).then(res => {
          if (res.code == "000000") {
            var array = res.result.rangeList
            console.log(array)
            array.map((item) => {
              item.time = this.secondToDate(item.timeCost)
            })
            this.rank_array = array
          } else {
            this.$message({
              message: '网络异常，请联系管理员',
              type: 'warning'
            });
          }
        })
      },
      secondToDate(result) {
        var h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
        var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 %
          60));
        var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
        return result = m + ":" + s;
      },
      handleSelect(key) {
        // console.log(key, keyPath);
        this.activeIndex = key
      }
    }
  }
</script>
<style scoped lang="less">
  .about {
    width: 100%;
    background: url('../assets/images/bg.png');
    background-size: 100% 100%;

    .homeicon {
      position: fixed;
      bottom: 10px;
      right: 10px;
      width: 40px;
      z-index: 3;
    }

    .tabs {
      display: flex;
      justify-content: center;

      .tabitem {
        margin: 20px 15px;
        padding-bottom: 10px;
        color: white;
      }

      .activetab {
        border-bottom: 3px solid #ffd04b;
      }
    }

    .el-menu-demo {
      display: flex;
      justify-content: center;
      border: 0;
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-wobottom-width: 3px !important;
      font-weight: bold;
    }

    .cloud {
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 2;
      left: 0;
    }

    .bluebg {
      z-index: 2;
    }

    .nodata {
      padding: 10px 0;
      font-size: 12px;
      color: grey;
    }

    .infor {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: white;
      position: relative;
      top: 80px;

      .test_rule {
        padding: 5px 20px;
        text-align: left;
        margin-bottom: 100px;
        text-indent: 2em;
        text-align: justify;
        font-size: 14px;
      }

      .square {
        position: absolute;
        top: -30px;
        width: calc(100% + 50px);
        z-index: 1;
      }

      .info_title {
        position: absolute;
        top: -55px;
        z-index: 2;
      }



      .tip {
        margin: 10px 0;
      }


    }

    .tabstyle {
      width: 100%;
      position: relative;
      overflow: hidden;

      .cloud {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
      }

      .statistics_title {
        display: flex;
        align-items: flex-start;
        padding: 0 20px;

        img {
          width: 50%;
        }
      }

      .statistics_data,
      .rank_data {
        width: 80%;
        margin: 0 auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 5px;
        position: relative;
        top: -30px;
        background: white;
        padding-top: 20px;

        .data_container {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .data_item {
            border-radius: 10px;
            width: 80%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgb(245, 245, 245);
            padding: 15px 20px;
            margin: 5px 0;
            font-size: 12px;
          }
        }

        .data_item:last-child {
          margin-bottom: 100px;
        }
      }

      .rank_data,
      .statistics_data {
        .data_container {
          .rank_first {
            background-image: linear-gradient(to right, #376fec, #92f5fd);
          }

          .rank_second {
            background-image: linear-gradient(to right, #58a8ff, #a3f5fb);
          }

          .rank_third {
            background-image: linear-gradient(to right, #a6d0fc, #cafbff);
          }

          .rank_normal {
            background: #d2e8f9;
          }

          .person_infor {
            display: flex;
            align-items: center;
            width: 40%;
            justify-content: flex-start;

            .avatar {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              position: relative;

              .avatar_img {
                border-radius: 100%;
                width: 35px;
                height: 35px;
              }

              .rank_detail {
                padding: 5px 10px;
                border-radius: 5px;
                width: 20px;
                height: 8px;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 25px;
              }

            }

            .rank_name {
              font-weight: bold;
              margin-left: 10px;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
</style>